<template>
  <div>
    <div class="dock">
      <ui-empty :empty="empty" v-if="account.length==0"></ui-empty>
      <p class="add-title" v-if="type == 1">您至少需要有一个财务对接人和服务对接人</p>
      <div class="dock-title">已有对接人信息</div>
      <ul class="clearfix">
        <li v-for="item in account">
          <p class="labels clearfix">
            <span class="item-title">{{item.nickname}}</span>
            <span class="manager-list">
              <i class="item-manager">
                {{item.manager}}
              </i>
            </span>
          </p>
        </li>
      </ul>
    </div>
    <div class="dock-block">
      <div class="block-con">
        <ui-empty :empty="empty" v-if="list.length==0"></ui-empty>
        <p class="add-title">请选择</p>
        <p class="add-tip">如果对接人也就是您本人，请选择</p>
        <ul class="clearfix">
          <li
            v-for="(item,index) in list"
            :key="index"
            :data-type="item.type"
            :data-id="item.id"
            :data-name="item.name"
            :id="setAccountId(index)"
            :class="{'active': matchChecked(item.id, checkedList)}"
            @click="chooseDocking(item.id, matchChecked(item.id, checkedList), checkedList)"
          >自己就是{{item.name}}
          </li>
        </ul>
      </div>
    </div>
    <div class="other-title" @click="showOtherView">邀请其他人成为您的对接人
      <i :class="{'on': showOther}" class="css-arrow-down"></i>
    </div>
    <div class="dock-block m-t-none" v-if="showOther">
      <div class="block-con">
        <ui-empty :empty="empty" v-if="list.length==0"></ui-empty>
        <p class="add-title">对接人角色</p>
        <ul class="clearfix">
          <li
            v-for="(item,index) in list"
            :key="index"
            :data-type="item.type"
            :data-id="item.id"
            :data-name="item.name"
            :id="setAccountId(index)"
            :class="{'active': matchChecked(item.id, otherCheckedList)}"
            @click="chooseDocking(item.id, matchChecked(item.id, otherCheckedList),  otherCheckedList)"
          >{{item.name}}
          </li>
        </ul>
      </div>
    </div>
    <div class="dock" v-if="showOther">
      <p class="doc-title">选择邀请方式</p>
      <div class="invite-list">
        <div class="invite-item" @click="invite('sms')">
          <i class="sms"></i>
          <span>通过手机短信邀请</span>
        </div>
        <div class="invite-item" @click="invite('email')">
          <i class="email"></i>
          <span>通过邮箱邀请</span>
        </div>
        <div class="invite-item" @click="invite('potato')">
          <i class="potato"></i>
          <span>通过Potato邀请</span>
        </div>
      </div>
    </div>
    <div class="current-tips" :class="{show: isShowCurrentTips}">
        <div class="current-cont">
          <p class="tips-title">{{inviteTips}}</p>
          <input
            type="text"
            maxlength="15"
            v-model="phone"
            @keyup="keyInput"
            :placeholder="returnTips"
          >
          <div class="phone-item-code" @click="changeCode">
            <span>+{{code}}</span>
            <i class="css-arrow-down"></i>
          </div>
          <div class="current-button">
            <div class="button-left">
              <span @click="inviteCancel">取消</span>
            </div>
            <div class="button-right">
              <span class="invite-send" :class="{active: showPhone}" @click="inviteSend">发送邀请</span>
            </div>
          </div>
        </div>
    </div>
    <div class="current-tips" :class="{active: isShowInviteTips}">
      <div class="current-cont">
        <!-- 请输入对方邮箱帐号，并发送邀请 -->
        <p class="tips-title">请提供对方邮箱账号，系统将为您发送邀请</p>
        <!-- maxlength="15" -->
        <input id="email" type="text" v-model="email" @keyup="emailCheck" placeholder="请输入对方email帐号">
        <div class="current-button">
          <div class="button-left">
            <span class="b-cancel" @click="inviteCancel2">取消</span>
          </div>
          <div class="button-right">
            <span class="invite-send b-send" v-show="!showEmail">发送邀请</span>
            <!-- <a :href="email" v-show="showEmail" @click="inviteSend2">发送邀请</a> -->
            <a href="javascript:void(0)" v-show="showEmail" @click="inviteSend2">发送邀请</a>
          </div>
        </div>
      </div>
    </div>
    <div class="page-footer">
      <button class="btn btn-primary btn-block" @click="submit">提交</button>
    </div>
    <!-- 机构 -->
    <Modal v-if="showPopup && type == 1 " class="popup-tip-modal">
      <div class="popup-tip-box">
        <div class="title">恭喜你资料提交成功</div>
        <div class="content">感谢您的信任与配合</div>
        <div class="btn-group">
          <button @click="goHome" class="btn btn-primary btn-block">返回主页</button>
        </div>
      </div>
    </Modal>
    <!-- 个人 -->
    <Modal v-if="showPopup && type == 2" class="popup-tip-modal">
      <div class="popup-tip-box">
        <div class="title">恭喜你资料提交成功</div>
        <div class="sub-title">我们将尽快为您审核</div>
        <div class="content">为了给您提供精准的服务，可告知您的其他联系方式和喜好。</div>
        <div class="btn-group">
          <button @click="goHome" class="btn btn-primary btn-outline">返回主页</button>
          <nuxt-link :to="{name:'complete_info-contact'}" class="btn btn-primary">完善更多资料</nuxt-link>
        </div>
      </div>
    </Modal>
  </div>
</template>

<script>
import Page from "~/components/page";
import UILoading from "~/components/loading";
import UiEmpty from "~/components/empty";
import Modal from '~/components/Modal';
export default {
  components: {
    Page,
    [UILoading.name]: UILoading,
    UiEmpty,
    Modal
  },
  data() {
    return {
      isShowCurrentTips: false,
      isShowInviteTips: false,
      showEmail: false,
      showPhone: false,
      tab: "sms",
      list: [],
      account: [],
      empty: {
        text: "暂无数据"
      },
      code: "855",
      phone: "",
      email_data: null,
      email: "",
      checkedList: [],
      otherCheckedList: [],
      type: 1,
      showPopup:false,
      showOther: false
    };
  },
  asyncData(context) {
    const { store, route, query } = context;
    // 为了保证从区号选择返回是能带回之前的表单数据
    let rs = {};
    if (route.params.country && route.params.data) {
      rs = route.params.data;
      rs.code = route.params.country.code;
    }

    return rs;
  },
  computed: {
    getTab() {
      return this.$store.state.addDockingPeople.tab;
    },
    getPeople() {
      return this.$store.state.addDockingPeople.people;
    },
    inviteTips() {
      let str = "";
      switch (this.tab) {
        case "sms":
          str = "请提供对方手机号码，系统将为您发送邀请";
          break;
        case "wechat":
          str = "启动微信app失败，若您未安装微信app，请安装后再发送邀请";
          break;
        case "qq":
          str = "启动手机QQ失败，若您未安装手机QQ，请安装后再发送邀请";
          break;
        case "email":
          str = "请提供对方邮箱账号，系统将为您发送邀请";
          break;
        case "potato":
          str = "请提供对方Potato号码，系统将为您发送邀请";
          break;
        default:
          break;
      }
      return str;
    },
    returnTips() {
      let str = "";
      switch (this.tab) {
        case "sms":
          str = "请输入对方手机号码";
          break;
        case "wechat":
          str = "请输入对方微信帐号";
          break;
        case "qq":
          str = "请输入对方QQ帐号";
          break;
        case "email":
          str = "请输入对方email帐号";
          break;
        case "potato":
          str = "请输入对方potato帐号";
          break;
        default:
          break;
      }
      return str;
    }
  },
  mounted() {
    this.tab = this.getTab;
    this.getInfo();
    setTimeout(() => {
      document.querySelector('body').setAttribute('class', '')
    }, 10)

  },
  methods: {
    goHome(){
      if(this.$tools.isLema){
        if(this.$tools.isIOS){
          console.log('ios closejclick false')
          window.webkit.messageHandlers.closejclick.postMessage(false);
        }else if(this.$tools.isAndroid){
          console.log('android completeInfoDone 1')
          window.JSInterface2Java.completeInfoDone(1);
        }
      }else{
        this.$router.push({name:'index'});
      }
    },
    matchChecked (id, array) {
      return !!array.filter((item) => {
        return item == id;
      }).length
    },
    async getInfo() {
      try {
        let { data: rs } = await this.$axios.post("?ct=api&ac=get_complete_info",{step: 8});
        if (rs.code == 0) {
          const { data } = rs;
          this.list = data.groups;
          this.checkedList = data.page_data.include_groups;
          this.account = data.account;
          this.type = data.page_data.type;
        } else {
          this.$toast(rs.msg);
        }
      } catch (e) {
        this.$error(e);
      }
    },
    async invite_send() {
      let obj = {};
      obj.groups = this.otherCheckedList.join(",");
      switch (this.tab) {
        case "sms":
          obj.by = "1";
          obj.account = this.code + this.phone;
          break;
        case "email":
          obj.by = "2";
          obj.account = this.email;
          break;
        case "potato":
          obj.by = "3";
          obj.account = this.code + this.phone;
          break;
        default:
          break;
      }
      if (this.tab == "sms" || this.tab == "potato") {
        this.phone = "";
        this.showPhone = false;
      }

      try {
        let { data: rs } = await this.$axios.post(
          "?ct=api&ac=invite_send",
          obj
        );
        if (rs.code == 0) {
          const { data } = rs;
          if (rs.data.state > 0) {
            this.$alert({
              title: "发送邀请成功"
            }).then(() => {});
          }
        } else {
          this.$toast(rs.msg);
        }
      } catch (e) {
        this.$error(e);
      }
    },
    async invite_url() {
      let obj = {};
      obj.groups = this.checkedList.join(",");
      try {
        let { data: rs } = await this.$axios.post("?ct=api&ac=invite_url", obj);
        if (rs.code == 0) {
          const { data } = rs;
          //短信
          //<a href="sms:10086">发送</a>
          if (this.tab == "email") {
            this.email_data = data;
            this.isShowInviteTips = true; //test
            this.email = ''
          }
        } else {
          this.$toast(rs.msg);
        }
      } catch (e) {
        this.$error(e);
      }
    },
    changeCode() {
      let rs = {
        isShowCurrentTips: this.isShowCurrentTips,
        isShowInviteTips: this.isShowInviteTips,
        showEmail: this.showEmail,
        showPhone: this.showPhone,
        tab: this.tab,
        checkedList: this.checkedList,
        otherCheckedList: this.otherCheckedList,
        phone: this.phone,
        code: this.code,
        showOther: this.showOther
      };
      //修改联系方式的area_code
      this.$router.push({
        name: "area_list",
        query: { from: this.$route.name },
        params: {
          from: this.$route.name,
          data: rs
        }
      });
    },
    inviteCancel() {
      this.phone = "";
      this.showPhone = false;
      this.isShowCurrentTips = false;
    },
    keyInput(e) {
      let value = e.target.value;
      value = value.trim();
      value = this.clearNoNum(value);
      this.phone = value;
      if (value == "") {
        this.showPhone = false;
      } else {
        this.showPhone = true;
      }
    },
    clearNoNum(value) {
      //修复第一个字符是小数点 的情况.
      if (value != "" && value.substr(0, 1) == ".") {
        value = "";
      }
      value = value.replace(/^0*(0\.|[1-9])/, "$1"); //解决 粘贴不生效
      value = value.replace(/[^\d.]/g, ""); //清除“数字”和“.”以外的字符
      value = value.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的
      value = value
        .replace(".", "$#$")
        .replace(/\./g, "")
        .replace("$#$", ".");
      value = value.replace(/^(\-)*(\d+)\.(\d\d).*$/, "$1$2.$3"); //只能输入两个小数
      if (value.indexOf(".") < 0 && value != "") {
        //以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
        if (value.substr(0, 1) == "0" && value.length == 2) {
          value = value.substr(1, value.length);
        }
      }
      return value;
    },
    inviteSend() {
      if (!this.showPhone) return;
      this.isShowCurrentTips = false;
      this.invite_send();
    },
    inviteCancel2() {
      this.email = '';
      this.showEmail = false;
      this.isShowInviteTips = false;
    },
    emailCheck(e) {
      //正则表达式
      var reg = new RegExp(
        "^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$"
      );

      if(this.email) {
        this.showEmail = true;
      }

    },
    inviteSend2() {
      if (!this.showEmail) return;
      this.showEmail = false;
      this.isShowInviteTips = false;
      this.invite_send();
    },
    setAccountId(index) {
      return "account" + index;
    },
    // 修改对接人
    chooseDocking(id, isChecked, array) {
      if(isChecked) {
          this.$utils.arrayRemove(array, id);
      } else {
        array.push(id)
      }
    },
    invite(title) {
      if (!this.otherCheckedList.length) {
        this.$alert({
          title: "请选择对接人"
        }).then(() => {});
        return;
      }
      this.tab = title;
      this.$store.commit("addDockingPeople/SET_tab", title);
      let isReturn = false;
      if (title == "email") {
        isReturn = true;
        this.isShowInviteTips = true;
        // this.invite_url();
      } else if (title == "qq") {
        isReturn = true;
        this.$alert({
          title: "暂不支持QQ分享"
        }).then(() => {});
      } else if (title == "wechat") {
        isReturn = true;
        this.$alert({
          title: "暂不支持微信分享"
        }).then(() => {});
      }
      if (isReturn) return;
      this.isShowCurrentTips = true;
    },
    async submit () {
      try {
        let { data: rs } = await this.$axios.post("?ct=api&ac=change_groups", {groups: this.checkedList});
        if (rs.code == 0) {
          this.showPopup = true;
        } else {
          this.$toast(rs.msg);
        }
      } catch (e) {
        this.$error(e);
      }
    },
    showOtherView(){
      this.showOther = !this.showOther;
      if(this.showOther){//滚到底部
        this.$nextTick(()=>{
          var scrollHeight = document.body.scrollHeight || document.documentElement.scrollHeight;
          document.body.scrollTop = document.documentElement.scrollTop = scrollHeight;
        })
      }
    }
  },
  destroyed() {
    // 返回上一步需要
    let classList = document.querySelector('body').classList;
    if(!classList.contains('bg-white')){
      this.needAddClass = true;
      classList.add('bg-white');
    }
  }
};
</script>

<style lang="less" scoped>

.clearfix {
  &:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
  }
}
.dock-title {
  font-size: 30px;
  color:#666;
  padding-left: 30px;
  line-height: 90px;
  border-bottom: 2px solid #ededed;
}
.dock {
  background: #fff;
  .add-title {
    padding-left: 30px;
    line-height: 52px;
    font-family: "PingFangSC-Regular";
    font-size: 24px;
    color: #666;
    background-color: #edeef0;
  }
  .doc-title {
    margin-left: 30px;
    padding: 29px 0 21px;
    line-height: 1;
    font-size: 28px;
    color: #666;
    border-bottom: 2px solid #ededed;
  }
  ul {
    background: #fff;
    li {
      .labels {
        margin-left: 30px;
        padding-top: 30px;
        padding-right: 30px;
        padding-bottom: 30px;
        border-bottom: 2px solid #ededed;
        .item-title {
          font-family: "PingFangSC-Regular";
          font-size: 30px;
          color: #292929;
        }
        .item-circle {
          display: block;
          float: right;
          margin-top: 4px;
          width: 36px;
          height: 36px;
          border: 2px solid #ededed;
          border-radius: 36px;
        }
      }

      .manager-list {
        float: right;
        margin-top: 4px;
        max-width: 300px;
        color: #d39b00;
      }
    }
    li.active {
      .labels {
        .item-circle {
          border: 2px solid #2086f9;
          .item-dot {
            position: absolute;
            display: block;
            margin-left: 6px;
            margin-top: 6px;
            width: 20px;
            height: 20px;
            background-color: #2086f9;
            border-radius: 20px;
          }
        }
      }
    }
    li:last-child .labels {
      border-bottom: 0;
    }
  }
  .invite-list {
    background: #fff;
    .invite-item {
      display: flex;
      margin-left: 30px;
      border-bottom: 2px solid #ededed;
      i {
        margin-top: 20px;
        margin-bottom: 20px;
        height: 80px;
        width: 80px;
      }
      i.sms {
        background: url("~assets/img/sms.png") no-repeat;
        background-size: 80px 80px;
      }
      i.wechat {
        background: url("~assets/img/wechat.png") no-repeat;
        background-size: 80px 80px;
      }
      i.qq {
        background: url("~assets/img/qq.png") no-repeat;
        background-size: 80px 80px;
      }
      i.email {
        background: url("~assets/img/email.png") no-repeat;
        background-size: 80px 80px;
      }
      i.potato {
        background: url("~assets/img/potato.png") no-repeat;
        background-size: 80px 80px;
      }
      span {
        align-self: center;
        margin-left: 30px;
        font-family: "PingFangSC-Regular";
        font-size: 30px;
        color: #292929;
      }
    }
    .invite-item:last-child {
      border-bottom: 0;
    }
  }
}
.other-title {
  margin-top: 20px;
  background: #fff;
  position: relative;
  line-height: 90px;
  color: #2086f9;
  font-size: 32px;
  text-align: center;

  .css-arrow-down {
    position: absolute;
    right: 140px;
    top: 30px;
    width: 20px;
    height: 20px;

    &.on {
      top: 40px;
      transform: rotate(-135deg);
    }
  }
}
.dock-block {
  margin-top: 20px;
  padding: 36px 0;
  background: #fff;

  &.m-t-none {
    margin-top: 0;
    border-bottom: 2px solid #ededed;
  }

  .block-con{
    position: relative;
    margin: 0 auto;
    width: 690px;
    padding: 23px 42px;
    border: 2px solid #e2e2e4;
    border-radius: 5px;
  }

  .add-title {
    position: absolute;
    left: 21px;
    top: -10px;
    padding: 0 9px;
    z-index: 1;
    font-size: 28px;
    color: #666;
    background: #fff;
    line-height: 1;
  }

  .add-tip {
    margin-top: 9px;
    color: #999;
    font-size: 24px;
  }
  li {
    margin:25px 22px 0 0;
    float: left;
    width: 288px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    border: 1px solid #bec2cc;
    color: #333;
    font-size: 28px;
    border-radius: 4px;

    &:nth-child(2n) {
      margin-right: 0;
    }

    &.active {
      color: #2086f9;
      background: #f1f8ff;
      border-color: #2086f9;
    }
  }
}
.current-tips {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 2000;
  .current-cont {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -270px;
    margin-top: -170px;
    height: 340px;
    width: 540px;
    text-align: center;
    font-size: 28px;
    color: rgb(41, 41, 41);
    background-color: #fff;
    border-radius: 16px;
    .tips-title {
      margin-top: 40px;
      padding-left: 30px;
      padding-right: 30px;
      margin-bottom: 20px;
    }
    input {
      position: absolute;
      line-height: 70px;
      left: 30px;
      bottom: 116px;
      width: calc(100% - 60px);
      text-indent: 120px;
      font-size: 30px;
      border: 2px solid #ededf0;
      border-radius: 8px;
    }
    .phone-item-code {
      display: flex;
      align-items: center;
      position: absolute;
      line-height: 70px;
      left: 30px;
      bottom: 118px;
      width: 120px;
      span {
        text-indent: 12px;
      }
      i.css-arrow-down {
        margin-left: 12px;
      }
    }
    .current-button {
      display: flex;
      position: absolute;
      bottom: 0;
      width: 100%;
      line-height: 86px;
      font-size: 34px;
      // border-top: 2px solid #ededf0;
      .button-left {
        flex: 1;
        span {
          // display: block;
          // color: #2086f9;
          padding: 10px 30px;
          border: 2px solid #ededf0;
          border-radius: 8px;
        }
      }
      .button-right {
        flex: 1;
        text-align: left;
        // border-left: 2px solid #ededf0;
        .invite-send {
          opacity: 0.5;
          padding: 10px 30px;
          color: #fff;
          background-color: #2086f9;
          border-radius: 8px;
        }
        .invite-send.active {
          opacity: 1;
        }
      }
    }
  }
}
.current-tips.show {
  display: block;
}
.current-tips.active {
  display: block;
  .current-cont {
    .tips-title {
    }
    input {
      text-indent: 12px;
    }
    .current-button {
      .button-left {
        span.b-cancel {
        }
      }
      .button-right {
        .invite-send.b-send {
          opacity: 0.5;
        }
        a {
          padding: 10px 30px;
          color: #fff;
          background-color: #2086f9;
          border-radius: 8px;
        }
      }
    }
  }
}
</style>
